<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>RaspCTL</title>
    <script src="/static/js/jquery-1.8.3.js"></script>
    <script src="/static/js/jquery.json-2.4.js"></script>
</head>
<body>

<span id="info"></span>

<table id="filelist">
</table> 

<span id="toolbar">
    <button id="add">添加</button>
</span>

<script type="text/javascript">
    info = {path:"/",files:[]}; //global data

    function call_file(d, func) {
        $.get('api', {data:$.toJSON(d)}, function(data, status) {
            if(data && data.status == 'Success') {
                 info.path = d.args[0];
                 info.files = data.result;
                if(func) { func(); }
            } else {
                $("filelist").empty();
                alert("ERROR");
            }
        });
    }
    
    function path(cwd, dir) {
        if (cwd == "/") {
            dir = cwd + dir;
        } else {
            dir = cwd + "/" + dir;
        }
        return dir;
    }

    function filelist() {
        $("#filelist").empty();
        tr = '<tr><td><input type="checkbox" /></td><td><img src="static/img/folder.gif" style="display:none"/></td><td></td></tr>';
        tr2 = '<tr><td><input type="checkbox" disabled="true" /></td><td><img src="static/img/folder.gif" style="display:block"/></td><td>..</td></tr>';
        if(info.files == null) {
            return
        }
        if (info.path != "/") {
            $("#filelist").append(tr2);
        }
        $("#filelist tr:last td img").click(function(e){
            if (info.path == "/") { return; }
            dir = info.path.substring(0, info.path.lastIndexOf("/"));
            call_file({name:"File.list", args:[dir]}, function(){
                filelist();
            });
        });

        $("#info").html(info.path);
        for (i in info.files) {
            $("#filelist").append(tr);
            if(info.files[i][1]=="d") {
                $("#filelist tr:last td img").attr("style", "display:block");
                $("#filelist tr:last td img").val(i);
                $("#filelist tr:last td img").click(function(e){
                    dir = path(info.path, info.files[$(this).val()][2]);
                    call_file({name:"File.list", args:[dir]}, function(){
                        filelist();
                    });
                });
            }
            $("#filelist tr:last td:last").html(info.files[i][2]);
            $("#filelist tr:last td input").val(i);
        }
    }

    $(document).ready(function() {
        call_file({name:"File.list", args:[info.path]}, function(){
            filelist();
        });
    });

    $("#add").click(function(e){
        $.ajaxSetup({async:false});
        names = []; urls = [];
        $("#filelist tr td input").each(function(){
            if($(this).attr("checked") == "checked") {
                f = info.files[$(this).val()];
                if (f[1] == "d") {
                    api = {name:"File.list_all", args:[path(info.path, f[2])]};
                    $.get("api", {data:$.toJSON(api)}, function(data, status) {
                        if(data && data.status == "Success") {
                            for (i in data.result) {
                                names.push(data.result[i][2]);
                                urls.push(data.result[i][0]);
                            }
                        }
                    });
                } else {
                    names.push(f[2]);
                    urls.push(f[0]);
                }
            }
        });
        $.ajaxSetup({async:true});
        if(names.length>0) {
            data = {name:"Player.set_playlist", args:[names.join("#"), urls.join("#")]};
            $.get('api', {data:$.toJSON(data)}, function(data, status){
                if(data && data.status == 'Success') {
                    location.href="/player";
                } else {
                    alert("失败");
                }
            });     
        }
    });
</script>
</body>
</html>
